<template>
	<view class="d-flex flex-nowrap bg-white" :style="'height:'+height+'px'">
		<scroll-view class="scroll_left" scroll-y="true" :style="'height:'+height+'px'">
			<view class="scroll_left_list" v-for="(item,index) in 15" :key="index">
				<image src="/static/1.png" class="icons" mode=""></image>
				<view class="scroll_left_list_name">SPA</view>
			</view>
		</scroll-view>
		<scroll-view class="scroll_right pl-2" scroll-y="true" :style="'height:'+height+'px'">
			<view class="header d-flex flex-nowrap">
				<view class="header_name" :class="tabIndex==0 ?'c_check':''" @click="checkOne(0)">门店</view>
				<view class="header_name" :class="tabIndex==1 ?'c_check1':''" @click="checkOne(1)">员工</view>
			</view>
			<view class="wrap"  v-if="tabIndex==0">
				<view class="wrap_name">SPA</view>
				<view class="wrap_list bz p-2 d-flex flex-nowrap a-center" v-for="(item,index) in 10" :key="index" @click="navTo('/pages/shop/store/store')">
					<image src="/static/2.png" class="img" mode=""></image>
					<view class="flex-1 px-2">
						<view class="title">嗯哼</view>
						<view class="address my-1">万博万达店</view>
						<view class="d-flex flex-nowrap a-center">
							<view class="price">￥198.00</view>
							<view class="tag">起</view>
						</view>
					</view>
					<view class="btn">预约</view>
				</view>
			</view>
			<view class="wrap"  v-if="tabIndex==1">
				<view class="wrap_name">SPA</view>
				<view class="wrap_list bz p-2 d-flex flex-nowrap a-center" v-for="(item,index) in 10" :key="index"  @click="navTo('/pages/shop/detile/detile')">
					<image src="/static/2.png" class="img" mode=""></image>
					<view class="flex-1 px-2">
						<view class="title">张琳</view>
						<view class="address my-1">万博万达店</view>
						<view class="address">营业时间: 09:00 : 21:30</view>
					</view>
					<!-- <view class="btn">预约</view> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				height:'',
				tab:['门店','员工'],
				tabIndex:0
			}
		},
		onLoad() {
			_this=this;
			uni.getSystemInfo({
				success: function (res) {
					console.log(res.windowHeight)
					_this.height=res.windowHeight
				}
			});
		},
		methods: {
			checkOne(e){
				this.tabIndex=e;
			},
			navTo(e){
				uni.navigateTo({
					url:e
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.scroll_left{
	width: 150rpx;
	box-sizing: border-box;
	padding: 0 15rpx;
	.scroll_left_list{
		padding: 30rpx 0;
		border-bottom: 2rpx solid #333;
		.icons{
			box-sizing: border-box;
			display:block;
			width:50rpx;
			height: 50rpx;
			margin: 0 auto;
		}
		.scroll_left_list_name{
			padding-top: 20rpx;
			text-align: center;
			color: #666;
		}
	}
}
.scroll_right{
	.header{
		height: 100rpx;
		line-height: 100rpx;
		.header_name{
			width: 50%;
			text-align: center;
			color: #CA9A4D;
			font-size: 30rpx;
			font-weight: bold;
		}
		.c_check{
			background: #D7B073;
			border-radius: 10rpx 0px 30rpx 0px;
			color: #fff;
		}
		.c_check1{
			background: #D7B073;
			border-radius: 0rpx 10rpx 0rpx 30rpx;
			color: #fff;
		}
	}
	.wrap_name{
		height: 80rpx;
		line-height: 80rpx;
		color: #2E4E7E;
		font-size: 33rpx;
		font-family: SourceHanSansCN;
		font-weight: bold;
		color: #2E4E7E;
	}
	.wrap_list{
		border-bottom: 1rpx solid #f8f8f8;
		.img{
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;
		}
		.title{
			height: 40rpx;
			line-height: 40rpx;
			font-size: 30rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #363636;
		}
		.address{
			font-size: 25rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #B2B2B2;
		}
		.price{
			font-size: 23rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #C52525;
		}
		.tag{
			font-size: 23rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #B2B2B2;
		}
		.btn{
			width: 90rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #2E4E7E;
			border-radius: 20rpx;
			font-size: 25rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
		}
	}
}


</style>
